{% extends 'layout/basic.html' %}
{% load static %}
{% block title %}注册{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
    <style>
        .error-msg {
            color: red;
            position: absolute;
            font-size: 10px;
        }
    </style>

{% endblock %}
{% block content %}
    <div class="account">
        <div class="title">用户注册</div>
        <form id="regForm" method="POST" novalidate>
            {% csrf_token %}
            {% for field in form %}
{#                {% if field.name == 'code' %}#}
{#                    <div class="form-group">#}
{#                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>#}
{#                        <div class="row">#}
{#                            <div class="col-xs-7">#}
{#                                {{ field }}#}
{#                                <span class="error-msg"></span>#}
{#                            </div>#}
{#                            <div class="col-xs-5">#}
{#                                <input id="btnSms" type="button" class="btn btn-default" value="点击获取验证码" >#}
{#                            </div>#}
{#                        </div>#}
{#                    </div>#}
{#                {% else %}#}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                        <span class="error-msg"></span>
                    </div>
{#                {% endif %}#}
            {% endfor %}

            <div class="row">
                <div class="col-xs-3">
                    <input id="btnSubmit" type="button" class="btn btn-primary" value="注  册"/>
                </div>
            </div>
        </form>
    </div>

{% endblock %}



{% block js %}
    <script>
        //页面框架加载完成之后自动执行函数
        $(function () {
            {#bindClickBtnSms()#}
            bindClickSubmit()
        });
        /*
        点击提交(注册)
        */
        function bindClickSubmit() {
            $('#btnSubmit').click(function () {
                $('.error-msg').empty(); //每次验证完清除
                //收集表单中数据(找到每一个字段)
                {#$('#regForm').serialize() //一下收集所有input框数据#}

                //数据ajax发送到后台
                $.ajax({
                    url:"{% url 'register' %}",
                    type:'POST',
                    data:$('#regForm').serialize(),
                    dataType: 'JSON',
                    success:function (res) {
                        if (res.status){
                            location.href = res.data
                        }else {
                            $.each(res.error, function (key, value) {
                                $('#id_' + key).next().text(value[0]);
                            })
                        }

                    }

                })
            })
        }
        /*
        点击获取验证码的按钮绑定
         */

    </script>
{% endblock %}